<template>
  <div style="background: black">
    <canvas id="bg" width="2000" height="2000"/>
    <div class="cockpitMainBox" >
      <cockpit-detail v-show="showDetail"
                      @everydaySales="openDetail('everydaySales')"
                      :visible.sync="showDetail"
                      :data="detailData"
      />
      <div class="title">
        <div class="titleText flex a-item">{{ cockpitType[currentCockpitType] }}大屏
          <div class="triangle" @click="setDropDownHeight"/>
          <div class="dropDown" v-show="dropDownHeight" :style="{height:dropDownHeight}">
            <div class="switch flex a-item j-content" @click="setCockpitType('sale')">销售看板</div>
            <div class="switch flex a-item j-content" @click="setCockpitType('profit')">毛利看板</div>
          </div>
        </div>
<!--        <el-select v-model="dropDownType" @change="removeQuery()" class="dropDownType" placeholder="请选择">-->
<!--          <el-option-->
<!--            key="goodsType"-->
<!--            label="商品分类"-->
<!--            value="goodsType">-->
<!--          </el-option>-->
<!--          <el-option-->
<!--            key="goodsBrand"-->
<!--            label="商品品牌"-->
<!--            value="goodsBrand">-->
<!--          </el-option>-->
<!--        </el-select>-->
      </div>
      <div class="tableBox monthlySales" v-loading="loading.monthlySales">
        <z-select
          url="/api/cockpit/cockpitSaleBoard/dropDownList"
          :popperAppendToBody="false"
          class="type"
          size="999"
          :params="{
            dropDownType,
          }"
          labelKey="dropDownName"
          valueKey="dropDownName"
          @change="$event=>setQuery('monthlySales',$event)"
        />
        <div class="leftBor" />
        <div class="rightBor" />
        <div class="reportTitle">
          月度分公司(万)
        </div>
        <div class="xial"/>
        <div class="scroll">
          <echarts-template :width="containSizes.monthlySales.width"  :height="containSizes.monthlySales.height" :option="monthlySaleOption" />
        </div>
      </div>
      <div class="tableBox monthlyCompare" v-loading="loading.monthlyCompare">
        <z-select
          url="/api/cockpit/cockpitSaleBoard/dropDownList"
          :popperAppendToBody="false"
          class="type pCustomer"
          size="999"
          :params="{
            dropDownType:'goodsCustomer',
          }"
          labelKey="dropDownName"
          valueKey="dropDownName"
          @change="$event=>setQuery('monthlyCompare',$event)"
        />
        <div class="leftBor" />
        <div class="rightBor" />
        <div class="reportTitle">
          月度分大类(万)
        </div>
        <div class="xial"/>
        <div class="scroll">
          <echarts-template :width="containSizes.monthlyCompare.width"  :height="containSizes.monthlyCompare.height" :option="monthlyCompareOption" />
        </div>
      </div>
      <div class="tableBox annualCompare" v-loading="loading.annualCompare">
        <z-select
          url="/api/cockpit/cockpitSaleBoard/dropDownList"
          :popperAppendToBody="false"
          class="type"
          size="999"
          :params="{
            dropDownType,
          }"
          labelKey="dropDownName"
          valueKey="dropDownName"
          @change="$event=>setQuery('annualCompare',$event)"
        />
        <div class="leftBor" />
        <div class="rightBor" />
        <div class="reportTitle">
          年度同比(万)
        </div>
        <div class="xial"/>
        <div class="scroll">
          <echarts-template :width="containSizes.annualCompare.width"  :height="containSizes.annualCompare.height" :option="annualCompareOption" />
        </div>
      </div>
      <div class="tableBox monthlyAccumulate" v-loading="loading.monthlyAccumulate">
        <z-select
          url="/api/cockpit/cockpitSaleBoard/dropDownList"
          :popperAppendToBody="false"
          class="type"
          size="999"
          :params="{
            dropDownType,
          }"
          labelKey="dropDownName"
          valueKey="dropDownName"
          @change="$event=>setQuery('monthlyAccumulate',$event)"
        />
        <div class="leftBor" />
        <div class="rightBor" />
        <div class="reportTitle">
          月度累计(万)
        </div>
        <div class="xial"/>
        <div class="scroll">
          <echarts-template :width="containSizes.monthlyAccumulate.width"  :height="containSizes.monthlyAccumulate.height" :option="monthlyAccumulateOption" />
        </div>
      </div>
      <div class="tableBox annualAccumulate" v-loading="loading.annualAccumulate">
        <z-select
          url="/api/cockpit/cockpitSaleBoard/dropDownList"
          :popperAppendToBody="false"
          class="type"
          size="999"
          :params="{
            dropDownType,
          }"
          labelKey="dropDownName"
          valueKey="dropDownName"
          @change="$event=>setQuery('annualAccumulate',$event)"
        />
        <div class="leftBor" />
        <div class="rightBor" />
        <div class="reportTitle">
         年度累计(万)
        </div>
        <div class="xial"/>
        <div class="scroll">
          <echarts-template :width="containSizes.annualAccumulate.width"  :height="containSizes.annualAccumulate.height" :option="annualAccumulateOption" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import echartsTemplate from '@/components/echartsTemplate/echartsTemplate'
import { debounce } from '../../../utils/auth'
import cockpitDetail from './cockpitDetail'
import { getCockpit, monthlySale, monthlySum, monthlyYoy, yearlySum, yearlyYoy } from '../../../api/erp/cockpit'

export default {
  name: 'financeCockpit',
  components:{echartsTemplate, cockpitDetail},
  data(){
    return{
      status:0,
      loading:{
        monthlySales:false,
        monthlyCompare:false,
        annualCompare:false,
        monthlyAccumulate:false,
        annualAccumulate:false,
      },
      query:{
        monthlySale:''
      },
      dropDownType:'goodsType',
      dropDownHeight:0,
      cockpitType:{
        sale:'销售', profit:'毛利'
      },
      monthlySaleOption:{},
      monthlyCompareOption:{},
      annualCompareOption:{},
      monthlyAccumulateOption:{},
      annualAccumulateOption:{},
      currentCockpitType:'sale',
      monthlySalesOption: {},
      showDetail:false,
      //明细数据
      detailData:{
        title:'公司直营数据',
        props:[{prop:'companyName',label:'配送中心'},{prop:'orderCount',label: '销售单数'},{prop:'acceptBoxCount',label:'销售箱数'},{prop:'acceptTaxAmount',label:'销售金额'}],
        data:[]
      },
      detailProps:{
        monthlySales:{

        }
      },
      //解决echarts无法跟随屏幕变化更新高度
      /**
       * width 容器宽度
       * height 容器高度
       * widthProportion: 容器占父级元素宽度百分比‘
       * heightProportion: 容器占父级元素高度百分比
       * */
      containSizes:{
        monthlySales:{width:'1000px',height:'200px',widthProportion:2,heightProportion:0.80},
        monthlyCompare:{width:'1000px',height:'200px',widthProportion:2,heightProportion:0.80},
        annualCompare:{width:'1000px',height:'200px',widthProportion:2,heightProportion:0.80},
        monthlyAccumulate:{width:'1000px',height:'200px',widthProportion:2,heightProportion:0.85},
        annualAccumulate:{width:'1000px',height:'200px',widthProportion:2,heightProportion:0.85},
      },
      app:null,
      bg:null,
      ctx:null,
      bgConfig:{
        columnsCount:0,
        charIndex:[],
      },
      ctxfontSize:0,
      year:'',
      month:"",
      day:''


    }
  },
  created() {
    const date = new Date()
    this.year = date.getFullYear()
    this.month = date.getMonth()
    this.day = date.getDay()
    setTimeout(()=>{this.monthlySaleOption ={
          animation: true,
          color: ["#3398DB"],
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow"
            }
          },
          legend: {
            show: true,
            itemHeight: 3,
            bottom:'5%',
            left:'10%',
            data:[
              {
                name:`${this.getPeriod(2)}`,
                textStyle: {
                  color: '#fff',
                  fontSize:10
                }
              },{
                name:`${this.getPeriod(3)}`,
                textStyle: {
                  color: '#fff',
                  fontSize:10
                }
              },{
                name:`${this.getPeriod(1)}`,
                textStyle: {
                  color: '#fff',
                  fontSize:10
                }
              }]
          },
          grid: {
            top:30,
            left:50,
            bottom:50
          },
          yAxis: [{
            splitLine: {
              show: true,    // 是否显示分隔线。默认数值轴显示，类目轴不显示
              interval: '0',    // 坐标轴刻度标签的显示间隔，在类目轴中有效.0显示所有
              lineStyle: {
                color: 'rgba(255,255,255,.2)'
              },
              width: 3,    // 分隔线线宽
              type: 'solid',     // 坐标轴线线的类型（'solid'，实线类型；'dashed'，虚线类型；'dotted',点状类型）
            },
            axisLine:{
              show: false,
            },
            axisLabel: {
              show:true,
              interval:0,//代表显示所有x轴标签显示
              textStyle: {
                color: 'rgba(255,255,255,.45)'
              },

            },
          }],
          xAxis: [{
            data: [],
            axisLabel: {
              show:true,
              interval:0,//代表显示所有x轴标签显示
              textStyle: {
                color: 'rgba(255,255,255,.45)'
              },

            },
            axisLine:{
              show: false,
            },
            splitLine: {
              show: false,
            },
          }],
          series: [
            {
              name: `${this.getPeriod(2)}`,
              type: "bar",
              barWidth: 15,
              data: [],
              color:'#EDDB8B',
              label: {
                show: true,
                position: 'top' // 设置标签显示在柱状图的顶部
              }
            },
            {
              name: `${this.getPeriod(3)}`,
              type: "bar",
              barWidth: 15,
              data: [],
              color:'#1aff00',
              barCateGoryGap:20,
              label: {
                show: true,
                position: 'top' // 设置标签显示在柱状图的顶部
              }
            },
            {
              name: `${this.getPeriod(1)}`,
              type: "bar",
              barWidth: 15,
              data: [],
              color:'#02BBFE',
              label: {
                show: true,
                position: 'top' // 设置标签显示在柱状图的顶部
              }
            },
          ]
        }})
    setTimeout(()=>{this.monthlyCompareOption ={
      animation: true,
      color: ["#3398DB"],
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow"
        }
      },
      legend: {
        show: true,
        itemHeight: 3,
        bottom:'5%',
        left:'10%',
        data:[
          {
            name:`${this.getPeriod(2)}`,
            textStyle: {
              color: '#fff',
              fontSize:10
            }
          },{
            name:`${this.getPeriod(3)}`,
            textStyle: {
              color: '#fff',
              fontSize:10
            }
          },{
            name:`${this.getPeriod(1)}`,
            textStyle: {
              color: '#fff',
              fontSize:10
            }
          }]
      },
      grid: {
        top:30,
        left:80,
        bottom:50
      },
      yAxis: [{
        splitLine: {
          show: true,    // 是否显示分隔线。默认数值轴显示，类目轴不显示
          interval: '0',    // 坐标轴刻度标签的显示间隔，在类目轴中有效.0显示所有
          lineStyle: {
            color: 'rgba(255,255,255,.2)'
          },
          width: 3,    // 分隔线线宽
          type: 'solid',     // 坐标轴线线的类型（'solid'，实线类型；'dashed'，虚线类型；'dotted',点状类型）
        },
        axisLine:{
          show: false,
        },
        axisLabel: {
          show:true,
          interval:0,//代表显示所有x轴标签显示
          textStyle: {
            color: 'rgba(255,255,255,.45)'
          },

        },
      }],
      xAxis: [{
        data: [],
        axisLabel: {
          show:true,
          interval:0,//代表显示所有x轴标签显示
          textStyle: {
            color: 'rgba(255,255,255,.45)'
          },

        },
        axisLine:{
          show: false,
        },
        splitLine: {
          show: false,
        },
      }],
      series: [

        {
          name: `${this.getPeriod(2)}`,
          type: "bar",
          barWidth: 20,
          data: [],
          color:'#EDDB8B',
          label: {
            show: true,
            position: 'top' // 设置标签显示在柱状图的顶部
          }
        },
        {
          name: `${this.getPeriod(3)}`,
          type: "bar",
          barWidth: 20,
          data: [],
          color:'#1aff00',
          label: {
            show: true,
            position: 'top' // 设置标签显示在柱状图的顶部
          }
        },        {
          name: `${this.getPeriod(1)}`,
          type: "bar",
          barWidth: 20,
          data: [],
          color:'#02BBFE',
          label: {
            show: true,
            position: 'top' // 设置标签显示在柱状图的顶部
          },
          itemStyle:{
            textStyle: {
              color: 'rgba(255,255,255,.45)'
            },
          }
        },
      ]
    }})
    setTimeout(()=>{this.annualCompareOption ={
      animation: true,
      color: ["#3398DB"],
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow"
        }
      },
      legend: {
        show: true,
        itemHeight: 3,
        bottom:'5%',
        left:'10%',
        data:[
          {
            name:`${this.year -1}`,
            textStyle: {
              color: '#fff',
              fontSize:10
            }
          },{
            name:`${this.year}`,
            textStyle: {
              color: '#fff',
              fontSize:10
            }
          }
          ]
      },
      grid: {
        top:30,
        left:80,
        bottom:50
      },
      yAxis: [{
        splitLine: {
          show: true,    // 是否显示分隔线。默认数值轴显示，类目轴不显示
          interval: '0',    // 坐标轴刻度标签的显示间隔，在类目轴中有效.0显示所有
          lineStyle: {
            color: 'rgba(255,255,255,.2)'
          },
          width: 3,    // 分隔线线宽
          type: 'solid',     // 坐标轴线线的类型（'solid'，实线类型；'dashed'，虚线类型；'dotted',点状类型）
        },
        axisLine:{
          show: false,
        },
        axisLabel: {
          show:true,
          interval:0,//代表显示所有x轴标签显示
          textStyle: {
            color: 'rgba(255,255,255,.45)'
          },

        },
      }],
      xAxis: [{
        data: [],
        axisLabel: {
          show:true,
          interval:0,//代表显示所有x轴标签显示
          textStyle: {
            color: 'rgba(255,255,255,.45)'
          },

        },
        axisLine:{
          show: false,
        },
        splitLine: {
          show: false,
        },
      }],
      series: [
        {
          name: `${this.year -1 }`,
          type: "bar",
          barWidth: 25,
          data: [],
          color:'#EDDB8B',
          label: {
            show: true,
            position: 'top' // 设置标签显示在柱状图的顶部
          }
        },
        {
          name: `${this.year}`,
          type: "bar",
          barWidth: 25,
          data: [],
          color:'#02BBFE',
          label: {
            show: true,
            position: 'top' // 设置标签显示在柱状图的顶部
          },
          itemStyle:{
            textStyle: {
              color: 'rgba(255,255,255,.45)'
            },
          }
        }
      ]
    }})
    setTimeout(()=>{this.monthlyAccumulateOption ={
      animation: true,
      color: ["#3398DB"],
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow"
        }
      },
      legend: {
        show: true,
        itemHeight: 3,
        bottom:'0',
        left:'10%',
        data:[
          {
            name:'直营',
            textStyle: {
              color: '#fff',
              fontSize:10
            }
          },{
            name:'非直营',
            textStyle: {
              color: '#fff',
              fontSize:10
            }
          }
        ]
      },
      grid: {
        top:30,
        left:80,
        bottom:50
      },
      yAxis: [{
        splitLine: {
          show: true,    // 是否显示分隔线。默认数值轴显示，类目轴不显示
          interval: '0',    // 坐标轴刻度标签的显示间隔，在类目轴中有效.0显示所有
          lineStyle: {
            color: 'rgba(255,255,255,.2)'
          },
          width: 3,    // 分隔线线宽
          type: 'solid',     // 坐标轴线线的类型（'solid'，实线类型；'dashed'，虚线类型；'dotted',点状类型）
        },
        axisLine:{
          show: false,
        },
        axisLabel: {
          show:true,
          interval:0,//代表显示所有x轴标签显示
          textStyle: {
            color: 'rgba(255,255,255,.45)'
          },

        },
      }],
      xAxis: [{
        data: [],
        axisLabel: {
          show:true,
          interval:0,//代表显示所有x轴标签显示
          textStyle: {
            color: 'rgba(255,255,255,.45)'
          },

        },
        axisLine:{
          show: false,
        },
        splitLine: {
          show: false,
        },
      }],
      series: [
        {
          name: "直营",
          type: "bar",
          barWidth: 20,
          data: [],
          color:'#02BBFE',
          itemStyle:{
            textStyle: {
              color: 'rgba(255,255,255,.45)'
            },
          }
        },
        {
          name: "非直营",
          type: "bar",
          barWidth: 20,
          data: [],
          color:'#EDDB8B',
        },
      ]
    }})
    setTimeout(()=>{this.annualAccumulateOption ={
      animation: true,
      color: ["#3398DB"],
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow"
        }
      },
      legend: {
        show: true,
        itemHeight: 3,
        bottom:'0',
        left:'10%',
        data:[
          {
            name:'直营',
            textStyle: {
              color: '#fff',
              fontSize:10
            }
          },{
            name:'非直营',
            textStyle: {
              color: '#fff',
              fontSize:10
            }
          }
        ]
      },
      grid: {
        top:30,
        left:80,
        bottom:50
      },
      yAxis: [{
        splitLine: {
          show: true,    // 是否显示分隔线。默认数值轴显示，类目轴不显示
          interval: '0',    // 坐标轴刻度标签的显示间隔，在类目轴中有效.0显示所有
          lineStyle: {
            color: 'rgba(255,255,255,.2)'
          },
          width: 3,    // 分隔线线宽
          type: 'solid',     // 坐标轴线线的类型（'solid'，实线类型；'dashed'，虚线类型；'dotted',点状类型）
        },
        axisLine:{
          show: false,
        },
        axisLabel: {
          show:true,
          interval:0,//代表显示所有x轴标签显示
          textStyle: {
            color: 'rgba(255,255,255,.45)'
          },

        },
      }],
      xAxis: [{
        data: [],
        axisLabel: {
          show:true,
          interval:0,//代表显示所有x轴标签显示
          textStyle: {
            color: 'rgba(255,255,255,.45)'
          },

        },
        axisLine:{
          show: false,
        },
        splitLine: {
          show: false,
        },
      }],
      series: [
        {
          name: "直营",
          type: "bar",
          barWidth: 20,
          data: [],
          color:'#02BBFE',
          itemStyle:{
            textStyle: {
              color: 'rgba(255,255,255,.45)'
            },
          }
        },
        {
          name: "非直营",
          type: "bar",
          barWidth: 20,
          data: [],
          color:'#EDDB8B',
        },
      ]
    }})

    window.addEventListener('keydown',(e)=>{
      if(e.code === 'F11'){
        e.preventDefault()
        if (this.status){
          this.unqp()
        }else {
          this.qp()
        }
      }
    })
    this.onGet()
    setInterval(()=>{
      this.onGet()
    },1000*600)
  },
  mounted() {
    document.querySelector('.cockpitMainBox').style.height=`calc(100vh - ${84 / this.getRatio()}px)`
    this.app = document.querySelector('.app-main')
    const domResize = new ResizeObserver(()=>{
      this.setSize()
    })
    const _this = this
    window.addEventListener('resize',debounce(function(){
      document.querySelector('.cockpitMainBox').style.height=`100vh`
      _this.computedSize()
    }))
    domResize.observe(this.app)
    //背景文字坠落
    this.bg = document.querySelector('#bg')
    this.ctx = this.bg.getContext('2d')
    setInterval(()=>{
      this.draw()
    },40)

  },
  methods:{
    onGet(){
      this.getMonthlySale()
      this.monthlyYoy()
      this.getYearlyYoy()
      this.getMonthlySum()
      this.getYearlySum()
    },
    getPeriod(type){
      switch (type){
        case 1:
          return `${this.year}-${this.month+1}`;
        case 2:
          return `${this.year-1}-${this.month+1}`;
        case 3:
          if (this.month ===1)return `${this.year-1}-12`
          return `${this.year}-${this.month}`;
      }
    },
    setQuery(type,val){
      if (val){
        this.query[type] = val.dropDownName
      }else {
        this.query[type] = ''
      }
      if (type === 'monthlySales'){this.getMonthlySale()}
      else if (type=== 'monthlyCompare'){this.monthlyYoy()}
      else if (type=== 'annualCompare'){this.getYearlyYoy()}
      else if (type=== 'monthlyAccumulate'){this.getMonthlySum()}
      else if (type === 'annualAccumulate'){this.getYearlySum()}
    },
    //月度销售
    async getMonthlySale(){
      this.loading.monthlySales = true
      const res = await monthlySale({queryType:this.currentCockpitType,resultType:this.dropDownType,dropDownName:this.query.monthlySales})
      this.loading.monthlySales = false
      const list = res.data.content
      //x轴
      this.monthlySaleOption.xAxis[0].data = list.map(item=>item.name)
      if (this.monthlySaleOption.xAxis[0].data.length <15){
        const num = 15 -this.monthlySaleOption.xAxis[0].data.length
        for (let i=0;i<num;i++){
          this.monthlySaleOption.xAxis[0].data.push('')
        }
      }
      //y轴

      this.monthlySaleOption.series[2].data = list.map(item=>(item.curSaleAmount/10000)>>0)

      this.monthlySaleOption.series[0].data = list.map(item=>(item.yoySaleAmount/10000)>>0)

      this.monthlySaleOption.series[1].data = list.map(item=>(item.earlySaleAmount/10000)>>0)
    },
    //月度同比
    async monthlyYoy(){
      this.loading.monthlyCompare = true
      const res = await monthlyYoy({queryType:this.currentCockpitType,resultType:this.dropDownType,dropDownName:this.query.monthlyCompare})
      this.loading.monthlyCompare = false
      const list = res.data.content
      //x轴
      this.monthlyCompareOption.xAxis[0].data = list.map(item=>item.name)
      if (this.monthlyCompareOption.xAxis[0].data.length < 15){
        const num = 15-this.monthlyCompareOption.xAxis[0].data.length
        for (let i=0;i<num;i++){
          this.monthlyCompareOption.xAxis[0].data.push('')
        }
      }
      //y轴
      //本期
      this.monthlyCompareOption.series[2].data = list.map(item=>(item.curSaleAmount/10000)>>0)
      //同期
      this.monthlyCompareOption.series[0].data = list.map(item=>(item.yoySaleAmount/10000)>>0)
      //前期
      this.monthlyCompareOption.series[1].data = list.map(item=>(item.earlySaleAmount/10000)>>0)
    },
    //年度同比
    async getYearlyYoy(){
      this.loading.annualCompare = true
      const res = await yearlyYoy({queryType:this.currentCockpitType,resultType:this.dropDownType,dropDownName:this.query.annualCompare})
      this.loading.annualCompare = false
      const list = res.data.content
      //x轴
      this.annualCompareOption.xAxis[0].data = list.map(item=>item.name)

      if (this.annualCompareOption.xAxis[0].data.length < 15){
        const num = 15-this.annualCompareOption.xAxis[0].data.length
        for (let i=0;i<num;i++){
          this.annualCompareOption.xAxis[0].data.push('')
        }
      }
      //y轴
      //本期
      this.annualCompareOption.series[1].data = list.map(item=>(item.curSaleAmount/10000)>>0)
      //同期
      this.annualCompareOption.series[0].data = list.map(item=>(item.yoySaleAmount/10000)>>0)
    },
    //月度累计
    async getMonthlySum(){
      this.loading.monthlyAccumulate = true
      const res = await monthlySum({queryType:this.currentCockpitType,resultType:this.dropDownType,dropDownName:this.query.monthlyAccumulate})
      this.loading.monthlyAccumulate = false
      const list = res.data.content
      //x轴
      this.monthlyAccumulateOption.xAxis[0].data = list.map(item=>item.name)

      if (this.monthlyAccumulateOption.xAxis[0].data.length < 20){
        const num = 20 -this.monthlyAccumulateOption.xAxis[0].data.length
        for (let i=0;i<num;i++){
          this.monthlyAccumulateOption.xAxis[0].data.push('')
        }
      }
      //y轴
      //直营
      this.monthlyAccumulateOption.series[0].data = list.map(item=>(item.directSaleAmount/10000)>>0)
      //非直营
      this.monthlyAccumulateOption.series[1].data = list.map(item=>(item.unDirectSaleAmount/10000)>>0)
    },
    //年度累计
    async getYearlySum(){
      this.loading.annualAccumulate = true
      const res = await yearlySum({queryType:this.currentCockpitType,resultType:this.dropDownType,dropDownName:this.query.annualAccumulate})
      this.loading.annualAccumulate = false
      const list = res.data.content
      //x轴
      this.annualAccumulateOption.xAxis[0].data = list.map(item=>item.name)

      if (this.annualAccumulateOption.xAxis[0].data.length < 20){
        const num = 20 -this.annualAccumulateOption.xAxis[0].data.length
        for (let i=0;i<num;i++){
          this.annualAccumulateOption.xAxis[0].data.push('')
        }
      }
      //y轴
      //直营
      this.annualAccumulateOption.series[0].data = list.map(item=>(item.directSaleAmount/10000)>>0)
      //非直营
      this.annualAccumulateOption.series[1].data = list.map(item=>(item.unDirectSaleAmount/10000)>>0)
    },
    removeQuery(){
      for (let key in this.query){
        this.query[key] = ''
      }
      this.onGet()
    },
    getRatio() {
      var ratio = 0
      var screen = window.screen
      var ua = navigator.userAgent.toLowerCase()

      if (window.devicePixelRatio !== undefined) {
        ratio = window.devicePixelRatio
      } else if (~ua.indexOf('msie')) {
        if (screen.deviceXDPI && screen.logicalXDPI) {
          ratio = screen.deviceXDPI / screen.logicalXDPI
        }
      } else if (window.outerWidth !== undefined && window.innerWidth !== undefined) {
        ratio = window.outerWidth / window.innerWidth
      }

      if (ratio) {
        ratio = ratio / 1.25
      }
      return ratio
    },
    openDetail(type){
      this.showDetail = true
      this.detailData = this.detailProps[type]
    },
    setCockpitType(type){
      this.currentCockpitType = type
      this.dropDownHeight = 0
      this.onGet()
    },
    draw(){
      this.ctx.fillStyle='rgba(0,0,0,.1)'
      this.ctx.fillRect(0,0,this.bg.width,this.bg.height)
      this.ctx.textBaseline = 'top'
      this.ctx.fillStyle='rgba(0,0,255,.3)'
      const y = (this.bg.height/this.ctxfontSize)>>0
      for(let i=0;i<this.bgConfig.columnsCount;i++){
        this.ctx.fillText(this.getRandomChar(),i*this.ctxfontSize,this.bgConfig.charIndex[i]*this.ctxfontSize)
        if(y < this.bg.height&&Math.random()>0.99){
          this.bgConfig.charIndex[i] = 0
        }else{
          this.bgConfig.charIndex[i]++
        }

      }
    },

    getRandomChar(){
      const str = '123456789qwertyuiopasdfghjklzxcvbnm'
      return str[(Math.random() * str.length)>>0]
    },
    setDropDownHeight(){
      this.dropDownHeight = this.dropDownHeight?0:'120%'
    },
    computedSize(){
      Object.keys(this.containSizes).forEach(item=>{
        this.containSizes[item].width = `${document.querySelector(`.${item}`).offsetWidth * this.containSizes[item].widthProportion}px`
        this.containSizes[item].height = `${document.querySelector(`.${item}`).offsetHeight * this.containSizes[item].heightProportion}px`
      })
    },
    setSize:debounce(function(){
      this.computedSize()
      const size1 = (this.app.offsetWidth / 1920).toFixed(2) * 30
      const size2 = (this.app.offsetHeight / 1080).toFixed(2) * 30
      const size = Math.min(size1,size2)
      this.ctxfontSize = (this.bg.width / 60) >> 0
      this.ctx.font=`${this.ctxfontSize}px 微软雅黑`
      this.bgConfig.columnsCount =(this.bg.width / this.ctxfontSize)>> 0
      this.bgConfig.charIndex = new Array(this.bgConfig.columnsCount).fill(0)
      document.getElementsByTagName('body')[0].style.setProperty('--cockpitMainBoxFontSize',`${~~size}px`)
    },100),
    qp(){
      document.getElementsByTagName('body')[0].style.setProperty('--defaultContainerWidth','0')
      document.getElementsByTagName('body')[0].style.setProperty('--defaultAppMainPt','0')
      document.getElementsByTagName('body')[0].style.setProperty('--defaultAppMainZIndex','10')
      document.getElementsByTagName('body')[0].style.setProperty('--defaultSideBarWidth','0')
      if(document.documentElement.RequestFullScreen){
        document.documentElement.RequestFullScreen();
      }
      //兼容火狐
      if(document.documentElement.mozRequestFullScreen){
        document.documentElement.mozRequestFullScreen();
      }
      //兼容谷歌等可以webkitRequestFullScreen也可以webkitRequestFullscreen
      if(document.documentElement.webkitRequestFullScreen){
        document.documentElement.webkitRequestFullScreen();
      }
      //兼容IE,只能写msRequestFullscreen
      if(document.documentElement.msRequestFullscreen){
        document.documentElement.msRequestFullscreen();
      }
      this.status = 1
      document.querySelector('.fixed-header').style.display = 'none'
      document.querySelector('.cockpitMainBox').style.height=`${window.screen.height / this.getRatio()}px`
      document.querySelector('#el-main-footer').style.display = 'none'
    },
    unqp(){
      document.getElementsByTagName('body')[0].style.setProperty('--defaultContainerWidth','54px')
      document.getElementsByTagName('body')[0].style.setProperty('--defaultAppMainPt','84px')
      document.getElementsByTagName('body')[0].style.setProperty('--defaultAppMainZIndex','0')
      document.getElementsByTagName('body')[0].style.setProperty('--defaultSideBarWidth','200px')
      if(document.exitFullScreen){
        document.exitFullscreen()
      }
      //兼容火狐
      if(document.mozCancelFullScreen){
        document.mozCancelFullScreen()
      }
      //兼容谷歌等
      if(document.webkitExitFullscreen){
        document.webkitExitFullscreen()
      }
      //兼容IE
      if(document.msExitFullscreen){
        document.msExitFullscreen()
      }
      this.status = 0
      document.querySelector('.cockpitMainBox').style.height=`${window.screen.height / this.getRatio()}px`
      document.querySelector('#el-main-footer').style.display = 'block'
      document.querySelector('.fixed-header').style.display = 'block'
      document.querySelector('.sidebar-container').style.display = 'block'
    },

  }
}
</script>

<style lang="scss" scoped>
@font-face {
  font-family: 'SourceHanSansCN-Medium';
  src: local('SourceHanSansCN-Medium'), url('../../../assets/font_icon/SourceHanSansCN-Medium.otf') format('opentype');
}
.cockpitMainBox{
  font-family: SourceHanSansCN-Medium;
  //background-image: url("../../../assets/images/cockpitBg.png");
  z-index: 2;
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  min-width: 800px;
  font-size: var(--cockpitMainBoxFontSize,30px);
  transition: font-size linear 0.1s;
  position: relative;
  .triangle{
    border-width: 10px 10px 0;
    border-style: solid;
    border-color: white transparent transparent ;
    width: 20px;
    height: 0;
    cursor: pointer;
  }
  .title{
    background-image: url("../../../assets/images/cockpit/top_bg.png");
    background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: 100%;
    height: 10%;
    opacity:1;
    position: relative;
    .dropDownType{
      position: absolute;
      right: 8%;
      bottom: 0;
      width: 15%;
      &:before{
        content: '下拉类型选择';
        display: block;
        color:#C0C4CC;
        width: 15%;
        position: absolute;
        left: -15%;
        font-size: .3em;
      }
    }
    .titleText{
      width: 45%;
      height: 100%;
      margin: auto;
      bottom: 0;
      font-size:1.2em;
      color: white;
      justify-content: center;
      letter-spacing: 2px;
    }
    .dropDown{
      position: absolute;
      overflow: hidden;
      width: 20%;
      background: rgba(0,0,255,.3);
      border: #0E5FFF 3px solid;
      top: 2em;
      z-index: 999;
      border-radius: 5px;
      display: flex;
      flex-direction: column;
      transition: height 200ms linear;
      .switch{
        flex:1;
        &:hover{
          cursor: pointer;
          background: rgba(0,0,255,.8);
        }
      }
    }
  }
  .monthlySales{
    width: 50%;
    height: 28%;
    top: 11%;
    left: 1%;
  }
  .monthlyCompare{
    width: 50%;
    height: 28%;
    top: 40%;
    left: 1%;
  }
  .annualCompare{
    width: 50%;
    height: 28%;
    top: 69%;
    left: 1%;
  }
  .monthlyAccumulate{
    width: 47.5%;
    height: 42.5%;
    top:11%;
    right: 1%;
  }
  .annualAccumulate{
    width: 47.5%;
    height: 42.5%;
    top:54.5%;
    right: 1%;
  }

}
.tableBox{
  background-color: rgba(0,0,255,.18);
  background-size: 100%;
  position: absolute;
  padding: 10px 10px 0 10px;
  .scroll
  {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    &::-webkit-scrollbar {
      height: .8em;
      background-color: rgba(0,0,0,0);
    }
    &::-webkit-scrollbar-thumb{
      &:hover{
        background-color: '#1aff00';
      }
    }
  }
  .reportTitle{
    font-size: 0.6em;
    color: #FEFEFE;
  }
  .type{
    width: 30%;
    position: absolute;
    right: 5%;
    color: white;
    &:before{
      content: '类型筛选';
      font-size: 0.7em;
      display: block;
      width: 50%;
    }
  }
  .pCustomer{
    &:before{
      content: '商贸公司' !important;
      font-size: 0.7em;
      display: block;
      width: 50%;
    }
  }
  .xial{
    width: 45px;
    height: 10px;
    background-image: url("../../../assets/images/cockpit/xial.png");
    background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
  .leftBor{
    height: 100%;
    position: absolute;
    left: 0;
    margin-top: -10px;
    &:before{
      @extend %subscript;
      border-left: #64FAFC 3px solid;
      border-top: #64FAFC 3px solid;
      left: 0;
      top: 0;
      width: 5px;
      height: 5px;
    }
    &:after{
      @extend %subscript;
      border-left: #64FAFC 3px solid;
      border-bottom: #64FAFC 3px solid;
      left: 0;
      bottom: 0;
      width: 5px;
      height: 5px;
    }
  }
  .rightBor{
    height: 100%;
    position: absolute;
    right: 5px;
    margin-top: -10px;
    &:before{
      @extend %subscript;
      border-right: #64FAFC 3px solid;
      border-top: #64FAFC 3px solid;
      left: 0;
      top: 0;
      width: 5px;
      height: 5px;
    }
    &:after{
      @extend %subscript;
      border-right: #64FAFC 3px solid;
      border-bottom: #64FAFC 3px solid;
      left: 0;
      bottom: 0;
      width: 5px;
      height: 5px;
    }
  }
  .contentReport{
    border: rgba(0,0,255,0.1) 2px solid;
    position: relative;
    background: rgba(255,255,255,.05);
  }
  .containerLeftBor{
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    &:before{
      @extend %subscript;
      border-left: rgba(0,0,255,.3) 2px solid;
      border-top: rgba(0,0,255,.3) 2px solid;
      left: 0;
      top: 0;
      height: 5px;
    }
    &:after{
      @extend %subscript;
      border-left: rgba(0,0,255,.3) 2px solid;
      border-bottom: rgba(0,0,255,.3) 2px solid;
      left: 0;
      bottom: 0;
      height: 5px;
    }
  }
  .containerRightBor{
    height: 100%;
    position: absolute;
    right: 5px;
    top: 0;
    &:before{
      @extend %subscript;
      border-right: rgba(0,0,255,.3) 2px solid;
      border-top: rgba(0,0,255,.3) 2px solid;
      left: 0;
      top: 0;
      height: 5px;
    }
    &:after{
      @extend %subscript;
      border-right: rgba(0,0,255,.3) 2px solid;
      border-bottom: rgba(0,0,255,.3) 2px solid;
      left: 0;
      bottom: 0;
      height: 5px;
    }
  }
}
.thousand{
  &:after{
    content: ',';
    font-size: 0.3em;
    display: block;
    position: absolute;
    right: 1px;
    bottom: 0;
  }
}
%subscript{
  content: '';
  display: block;
  position: absolute;
  width: 5px;
  height: 5px;
}
#bg{
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
}
.more{
  position: absolute;
  right: 10px;
  font-size: 0.5em;
  background: rgba(0,0,255,.2);
  max-height: 4%;
  padding: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  &:after{
    content:'更多';
    color:white;
    font-weight: 400;
  }
}

</style>
